<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器练习</title>
    <style>
        * {
            font-size: 30px; 
        }
        p {
            font-weight: bold;
        }
        .w6 {
            font-weight: lighter;
        }
        #c6 {
            background-color: aqua;
            width: 200px;
        }
        div.w6 {
            font-size: 20px;
        }
        .w2,.c3 {
            font-size: 30px;
        }
        ul li {
            background-color: aquamarine;
        }
        ol>li {
            background-color: red;
        }
        div+p {
            background-color: green;
        }
        div~p {
            background-color: red;
        }
        [title] {
            font-weight: bold;
        }
        [title=c4] {
            color: yellowgreen;
        }
        [title^=c] {
            font-size: 40px;
        }
        [title$=4] {
            border: 2px solid black;
        }
        a:link {
            color: aqua;
        }
        a:visited {
            color: purple;
        }
        a:hover {
            color: gold;
        }
        a:active {
            color: thistle;
        }
        dl dd:first-child {
            color: red;
        }
        dl dd:last-child {
            color: purple;
        }
        dl dd:nth-child(2) {
            color: orange;
        }
        dl dd:nth-child(3) {
            color: rgb(157, 157, 36);
        }
        dl dd:nth-child(4) {
            color: green;
        } 
        dl dd:nth-child(5) {
            color: chartreuse;
        }
        dl dd:nth-child(6) {
            color: blue;
        }
        .word::first-letter {
            font-size: 50px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div>6</div>
    <p>感悟</p>
    <div class="w6">谢谢</div>
    <div id="c6"></div>
    <div class="w2">是吗？</div>
    <div class="c3">是吧</div>
    <ul>
        <li>6</li>
        <li>2</li>
    </ul>
    <ol>
        <li>1</li>
        <li>3</li>
    </ol>
    <div>
        <div></div>
        <p>6</p>
        <div>5</div>
    </div>
    <div title="c4">哈哈哈哈哈</div>
    <a href="#">快来点我</a>
    <dl>
        <dd>永</dd>
        <dd>远</dd>
        <dd>热</dd>
        <dd>泪</dd>
        <dd>盈</dd>
        <dd>眶</dd>
        <dd>!</dd>
    </dl>
    <div class="word">记得开心</div>
</body>
</html>